<template>
    <view>
        <view v-if="active==0"><clock></clock></view>
        <view v-if="active==1"><statistics></statistics></view>
        <van-tabbar  v-model="active" @change="onChange" fixed :placeholder="true">
            <van-tabbar-item icon="home-o">
                <span>打卡</span>
                <template #icon="props">
                   <img :src="props.active ? '../../mobile/static/images/clock_s.png' : '../../mobile/static/images/clock_n.png'" /> 
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="search">
                <span>统计</span>
                <template #icon="props">
                    <img :src="props.active ? '../../mobile/static/images/tj_s.png' : '../../mobile/static/images/tj_n.png'" /> 
                </template>
            </van-tabbar-item> 
        </van-tabbar>
    </view>
</template>
<script setup>
import clock from "./clock.vue";
import statistics from "./statistics.vue";
const active=ref(0)

const onChange=(e)=>{ 
    console.log(e)
    active.value=e
}
</script>
<style scoped lang="scss">
</style>